/**
  @Author 淮城一只猫
  @Date 2019-08-09
  @Name 首页文章列表
 */

.site-warp {
  .site-main {
    margin-top: -100px;
    margin-bottom: 35px;
    position: relative;
    flex-grow: 1;
    z-index: 1;
    //animation-duration: .8s;
    //animation-fill-mode: both;
    //animation-name: fadeInUp;
    //animation-timing-function: ease-out;

    .inner {
      padding: 75px;
      border-radius: 2px;
      box-shadow: 0 2px 24px 5px rgba(0, 0, 0, .05);
      margin: 0 auto;
      width: 100%;
      background: #fff;

      .site-post-list {
        .post-list {
          .post-card {
            display: flex;
            margin-bottom: 60px;
            position: relative;
            align-items: center;
            justify-content: space-between;

            &.align-right {
              right: -13%;

              .post-card-image-link {
                order: 2;
              }

              .post-card-content {
                margin-left: -3%;
                order: 1;
              }
            }

            &.align-left {
              left: -13%;
            }

            .post-card-image-link {
              display: block;
              max-width: 47%;

              .post-card-image {
                width: 460px;
                height: 460px;
                max-width: 100%;
                max-height: 100%;
                background-color: #c5d2d9;
                background-repeat: no-repeat;
                background-position: 50%;
                background-size: cover;
                border-radius: 2px;
                box-shadow: 5px 6px 26px -3px rgba(0, 0, 0, .22);
              }
            }

            .post-card-content {
              max-width: 49%;
              margin-right: -3%;

              .post-tags {
                list-style: none;
                margin: 0;
                padding: 0;

                .post-tag {
                  display: inline-block;
                  font-size: 13px;
                  margin: 0 10px 0 0;
                  text-transform: uppercase;

                  a {
                    color: #999;
                  }
                }
              }

              .post-card-title {
                a {
                  font-size: 20px;
                }
              }

              .post-card-excerpt {
                margin-bottom: 15px;

                p {
                  color: #666;
                  font-size: 17px;
                  line-height: 25px;
                }
              }

              .post-meta {
                display: flex;
                justify-content: space-between;
                align-items: center;

                .author-list {
                  display: flex;
                  flex-wrap: wrap-reverse;
                  margin: 0;
                  padding: 0;
                  list-style: none;

                  .author-list-item:nth-child(1) {
                    z-index: 10;
                  }

                  .author-list-item {
                    position: relative;
                    flex-shrink: 0;
                    margin: 0;
                    padding: 0;

                    .static-avatar {
                      display: flex;
                      justify-content: center;
                      align-items: center;

                      .author-profile-image {
                        display: block;
                        width: 34px;
                        height: 34px;
                        border: 2px solid #fff;
                        border-radius: 100%;
                        object-fit: cover;
                        margin-right: 0.5rem;
                      }

                      .author-profile-name {
                        font-size: 0.8rem;
                      }
                    }
                  }

                  .author-name {
                    font-size: 13px;
                    margin-left: 12px;
                    padding-top: 10px;
                    color: #777;
                  }
                }

                .reading-time {
                  font-size: 13px;
                  color: #777;
                  font-weight: 700;
                }
              }
            }
          }
        }
      }
    }
  }
}


// 小于 576px
@media (max-width: 575.98px) {
  .site-warp {
    .site-main {
      .inner {
        padding: 25px!important;

        .site-post-list {
          .post-list {
            .post-card {
              .post-card-content {
                padding-top: 25px!important;

                .post-card-excerpt {
                  p {
                    font-size: 15px;
                    line-height: 23px;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

// 小于 768px
@media (max-width: 767.98px) {
  .site-warp {
    .site-main {
      .inner {
        padding: 50px;

        .site-post-list {
          .post-list {
            .post-card {
              right: 0!important;
              left: 0!important;
              flex-basis: 100%;
              flex-wrap: wrap;
              width: 100%;
              margin-bottom: 50px;

              .post-card-image-link {
                order: 1!important;
                width: 100%;
                max-width: none;

                .post-card-image {
                  width: 100%;
                  height: 200px;
                }
              }

              .post-card-content {
                order: 2;
                padding-top: 35px;
                flex-basis: 100%;
                flex-wrap: wrap;
                width: 100%;
                max-width: 100%;
                text-align: center;
                margin: 0;
                .post-card-excerpt {
                  p {
                    text-align: left;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

// 小于 992px
@media (max-width: 991.98px) {

}

// 小于 1200px
@media (max-width: 1199.98px) {

}


@media (min-width: 768px) and (max-width: 991px) {
  .site-warp {
    .site-main {
      &.container {
        max-width: 100%;
      }
    }
  }
}

[data-theme="dark"] {
  .site-warp {
    .site-main {
      .inner {
        background-color: $bg-dark-2;
        box-shadow: 0 2px 24px 5px $bg-dark-1;

        .site-post-list {
          .post-list {
            .post-card {
              .post-card-image-link {
                .post-card-image {
                  box-shadow: 5px 6px 26px -3px $bg-dark-1;
                  &::after {
                    background-image: linear-gradient(-180deg, rgba(0, 0, 0, .5) 0, rgba(0, 0, 0, .8) 100%);
                    content: "";
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                  }
                }
              }

              .post-card-content {
                .post-tags {
                  .post-tag {
                    a {
                      color: #999;
                    }
                  }
                }
                .post-card-title {
                  a {
                    color: $dark-font;
                    font-size: 20px;
                  }
                }

                .post-card-excerpt {
                  p {
                    color: #666;
                  }
                }

                .post-meta {
                  .author-list {
                    .author-list-item {
                      .static-avatar {
                        .author-profile-image {
                          border: 2px solid $dark-font;
                          &::after {
                            background-image: linear-gradient(-180deg, rgba(0, 0, 0, .5) 0, rgba(0, 0, 0, .8) 100%);
                            content: "";

                            width: 100%;
                            height: 100%;
                          }
                        }
                        .author-profile-name {
                          color: $dark-font;
                        }
                      }
                    }
                    .author-name {
                      color: $dark-font;
                    }
                  }
                  .reading-time {
                    color: $dark-font;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
